<?php
  include_once 'config.php';
  include_once 'islogin.php';
  include_once 'fun.php';
  $_SESSION['isadmin']=isset($_SESSION['isadmin'])?$_SESSION['isadmin']:'';
    if ($_SESSION['isadmin']!=3&&$_SESSION['isadmin']!=-1) {
        header('Refresh:1;url=shop.php');
        die("请以人力管理员身份登录");
    }
  $name = isset($_GET['Name'])?trim($_GET['Name']):'';
  
  if ($name) {
      $sql = "select * from stuff where Name like '%$name%'  ";
  } else {
      $sql = "select * from stuff";
  }

  $con=connect();
  $res = query($sql, $con);

  $result=array();
  $result2=array();
  $result3=array();
  $i=0;
  $str='';
  if ($res->num_rows!=0) {
      while ($row = mysqli_fetch_assoc($res)) {
          //var_dump($row);
          $astr='';
          if ($row['managerid']!='') {
              $mid=(int)$row['managerid'];
              //var_dump($mid);
              $sql = "select Name from manager where managerid = {$mid}";
              $ress = query($sql, $con);

              while ($raw = mysqli_fetch_row($ress)) {
                  $result2=$raw;
              }
          
              //var_dump($result2);
              if ($result2) {
                  $astr=$result2[0];
              }
          }
         
              
          
          if($row['gender']=='1')
          $gender='男';
          else if($row['gender']=='0')
          $gender="女";
          else
          $gender="";
          $str.="{name:"."'".$row['Name']."'".","."price:"."'".$gender."',"."number:"."'".$row['age']."',"."id:".$row['stuffid'].","."userid:".$row['id'].","."mid:'".$astr."'}";
          if ($i<$res->num_rows-1) {
              $str.=',';
          }
          $i++;
      }
  }
//var_dump(($result));
//echo $str;

$sql = "select managerid,Name from manager";
    $res = query($sql, $con);
    while ($row = mysqli_fetch_all($res)) {
        $result3=$row;
    }

?>
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>员工修改</title>
   <!-- // <script src="../网页设计/库存修改.js"></script> -->

</head>
<style>
   .delete{
        width: 80px;
        height: 30px;
    }
  .delete:hover{
       background: #333;
       color: white;
   }
    .edit:hover{
        background: #333;
       color: white;
    }
   .edit{
       width: 80px;
        height: 30px;
      
        
   }
    ._button{
        background-color: grey;
        border: none;
        padding: 10px;
        color: white;
        text-align: center;
        font-size: 10px;
        margin-top: 0px;
        margin-right: 50px;
        margin-left: 50px;
        cursor: pointer;
    }
    
    ._button:hover{
        transition: all 0.5s;
        background: #333;
        color: white;
    }

   .content{
       margin-top: 20px;
   }
   .init-loading-home {
        background-color: #303133;
        display: flex;
        flex-direction: column;
       
    }
    .init-loading-home{
        height: 5%;
        display: none;
         z-index: 1;
    }
    .init-loading-main {
        user-select: none;
        width: 100%;
        height: 20%;
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1;
    }
    .init-loading-title {
        color: #FFF;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .init-loading-sub-title {
        color: #ABABAB;
        font-size: 12px;
    }
    .init-loading-footer {
        width: 100%;
        height: 20%;
        flex-grow: 0;
        text-align: center;
        padding: 1em 0;
    }
    .loader-first {
        font-size: 10px;
        margin: 100px auto;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        text-indent: -9999em;
        position: relative;
        animation: mymove 1.3s infinite linear;
        -webkit-animation: mymove 1.5s infinite linear;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
    }
   .buttontwo{
        margin-top: 15px;
    }
    .editblock{
        width: 300px;
        height: 400px;    
        text-align: center;
        margin-left: 25%;
        margin-top: -100px;    
        z-index: 1;
        border-radius: 10px;
        /* left: calc(100%-50px); */
        position:absolute;
    }
    .editblock .contenti{
        position:absolute;
        left: calc(50% - 210px);
        width: 300px;
        height: 350px;
    }
    .contenti{
        background: #eee;
        border-radius: 10px;
    }
  .contenti .title .editblock{
   
	display: flex;
	justify-content: space-between;
	/* 鼠标移入呈现移动光标 */
	cursor: move;

    }
    .customers {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 70%;
      margin-top: -10px;
    }
    
    .customers td, .customers th {
      border: 1px solid #ddd;
      padding: 8px;
    }
    
    .customers tr:nth-child(even){background-color: #f2f2f2;}
    
    .customers tr:hover {background-color: #ddd;}
    
    .customers th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      background-color: #333;
      color: white;
    }
input[type=text1] {
  width: 40%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-image: url('../网页图片/搜索\ \(1\).png');
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 50px;
  margin-left: 400px;
}
 input[type=text2], [type=number2]{
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
} 

.search_btn{
    margin-left: 10px;
    height: 45px;
    width: 60px;
}
.add_blocki{
    width: 25%;
    height: 40%;
    background-color: #f1f1f1;
    margin-left: 75%;
     position: fixed;
     text-align: center;
     margin-top:-200px;
}
.add_block{
    width: 25%;
    height: 40%;
    background-color: #f1f1f1;
    margin-left: 75%;
     position: fixed;
     text-align: center;
     margin-top:-200px;
}
.top_add{
    background-color: #333;
    height: 40px;
    color: white;
    font-size: x-large;
    margin-top: 0px;
    font-weight: bold;
}
.body{
    overflow-y: scroll;
}
.deletei{
    color:black;
}
.deletei:hover{
    color:white;
}
.title{
    background: #333;
    color: white;
    font-size:20px;
    font-weight: 700;
    height: 40px;
    text-align: center;
    padding-top: 8px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: move;

    /* left: calc(100%-50px); */
}
.admini{
    background:#eee;
    height:30px;
    width:100px;
    margin-top:-40px;
    border:#DCDCDC 2px solid;
    border-radius:5px;
    text-align:center;
    padding-top:5px;
   
}
.admini:hover{
    background-color:#E6E6FA ;
    color: white;
    box-shadow: 0 8px 10px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.logouti{
    background:#eee;
    width:100px;
    height:30px;
    margin-left:200px;
    margin-top:-38px;
    border:#DCDCDC 2px solid;
    border-radius:5px;
    text-align:center;
    padding-top:5px;
}
.logouti:hover{
    background-color:#E6E6FA ;
    color: white;
    box-shadow: 0 8px 10px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
div.tab {
    overflow:auto;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    margin-top:5px;
    width:15%;
    margin-left:80%;
    margin-top:-50px;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
   
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
    </style>

<body>
<form action="stuff.php" method="GET">
       <input type="text1" name="Name" placeholder="搜索..."> 
      <button class="search_btn" onclick="formSubmit()">查询</button>
    </form>
    <div  class="admini">
    <a href="admin_detail.php" style="text-decoration: none;"><i class="fa fa-user-circle" ></i><?php echo $_SESSION['username'];?></a>
</div>
    <div class="logouti">
    <a href="logout.php" style="text-decoration: none;" onclick="return confirm('确定退出吗？');"><i class="fa fa-sign-out" ></i>退出登录</a>
   </div>

<div class="tab">
 <button class="tablinks" onclick="openCity(event, 'London')" class="nametab" id="defaultOpen">工作人员<i class="fa fa-chevron-down"></i></button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">负责人<i class="fa fa-chevron-down"></i></button>
</div>

<div id="add_data">
 
    
    <div id="add_data">
  
   
    <br>
    <br>
    <br><br>
    <br>
    <div id="London" class="tabcontent">
    <table class="customers">
        <thead>
            <tr>
            <th>序号</th>
            <th>员工名字</th>
            <th>性别</th>
            <th>年龄</th>
            <th>负责人</th>
            <th>修改</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(list,index) in lists":key="list.id">
            <td>{{index+1}}</td>
            <td>{{list.name}}</td>
            <td>{{list.price}}</td>
            <td>{{list.number}}</td>
            <td>{{list.mid}}</td>
            <td>
            <button class="delete"> <span class="delete" @click="del(index)" onclick="<script>location.href='{list.id}'</script>" style="cursor: pointer">删除</span></button> 
            <button class="edit">   <span class="edit" @click="edit(list)"  style="cursor: pointer">编辑</span></button> 
            </td>
            </tr>
        </tbody>
    </table> 
    <div class="add_block">
        <p class="top_add">添加员工</p>
        <div class="add">
            名字：<br>
            <form action="stuff_add.php" method="POST">
            <input type="text" name="Name" v-model="obj.name"/>
            <br>
            性别：<br>
            <input type="radio" name="gender" value="1" checked>男
            <input type="radio" name="gender" value="0">女
            <br>
            年龄：<br>
            <input type="number" name="age" v-model="obj.number"/>
            <br>
            负责人：<br>
            <select name="manager" id="">
            <?php foreach ($result3 as $k => $res):?>
                <option name="manager"  value="<?php echo $res[0];?>"><?php echo $res[1];?></option>
                <?php endforeach;?>
            </select>
            <br>
            <button onclick="formSubmit()":disabled="!obj.name||!obj.number||obj.number<0" >保存</button>
        </form>
        </div>
    </div>

     </div>
    <br>
    <br>
    <br>
    
    <br>

    <div id="add_data">
   
    <div id="Paris" class="tabcontent">  
    <table class="customers">
        <thead>
            <tr>
            <th>序号</th>
            <th>负责人名字</th>
            <th>修改</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <?php foreach ($result3 as $k => $res):?>
            <td><?php echo $k+1;?></td>
            <td><?php echo $res[1];?></td>
            
            <td>
            <button class="delete">  <a class="deletei"  href='manager_delete.php?id=<?php echo $res[0];?>' style="text-decoration:none" >删除</a></button>
            <button class="edit">  <span class="edit" @click="show(<?php echo $res[0];?>)"  style="cursor: pointer">编辑</span></button>
            </td>
            </tr>
            <?php endforeach;?>
        </tbody>
    </table> 
    <div class="add_blocki">
        <p class="top_add">添加负责人</p>
       
        <div class="add">
            名字：<br>
            <form action="manager_add.php" method="POST">
            <input type="text" name="Name"/>
            <br>
            性别：<br>
            <input type="radio" name="gender" value="1" checked>男
            <input type="radio" name="gender" value="0">女
            <br>
            年龄：<br>
            <input type="number" name="age"/>
            <br>
            <br>
            <button onclick="formSubmit()" >保存</button>
        </form>
        </div>
    </div>
            </div>
     <!-- 写编辑弹框 -->
    <div id="layer" v-show="flag" class="editblock">
        <div class="contenti">
            <div class="title">
                    编辑
                <span @click="flag=false" ></span>
                
            </div>
           
            <div class="content">
            <form action="./stuff_update.php" method="POST">
            <input type="hidden" name="id"   v-model="editObj.id"/>
            <input type="hidden" name="userid" v-model="editObj.userid"/>
                <input type="text2" name="Name" placeholder="商品名称"  v-model="editObj.name"/>               
                <input type="number2" name="gender" placeholder="性别"  v-model="editObj.price" readonly/>
                <input type="number2" name="age" placeholder="年龄"  v-model="editObj.number"/><br>
                
                <input type="radio" name="xingbie" value="1">男
                <input type="radio" name="xingbie" value="0">女
                <select name="manager" id="" >
                <option name="manager" value="" hidden>默认:{{editObj.mid}}</option>
                <?php foreach ($result3 as $k => $res):?>
                <option name="manager"  value="<?php echo $res[0];?>"><?php echo $res[1];?></option>
                <?php endforeach;?>
                </select>
               <div class="buttontwo">
                <button class="_button" onclick="formSubmit()" @click="update()":disabled="!editObj.name||!editObj.number">更新</button>
                </form>
                <a class="_button"  @click="flag=fasel">关闭</a>
            </div> 
            
        </div>
        
    </div>

</div>
<div id="layer" v-show="fg" class="editblock">
        <div class="contenti">
            <div class="title">
                    编辑
                <span @click="fg=false" ></span>
                
            </div>
           
            <div class="content">
            <form action="./manager_update.php" method="POST">
            <input type="hidden" name="id"   placeholder="editObj1.aid"  v-model="editObj1.aid">
                <input type="text2" name="Name" />  
               <div class="buttontwo">
                <button class="_button" onclick="formSubmit()" >更新</button>
                </form>
                <a class="_button"  @click="fg=fasel">关闭</a>
            </div> 
        </div>
        
    </div>

</div>
 
<script>
    window.onload=function(){
    new Vue({
        el:"#add_data",
        data:{
            obj:{          
            name:'',
            price:'',
            number:'',
            mid:'',
            userid:''
            },          
            lists:[<?php echo  $str;?>],
            editObj:{},//编辑
            editObj1:{},
            flag:false,//编辑的弹框不显示 
            fg:false,
            id:''
        },
        methods:{
            add:function(){ 
                
               //  let {nam,price,number}=this.obj;   //必填判断
                if(!this.obj.name||!this.obj.price||!this.obj.number) 
                
                 return;
                var _id=Math.max(...this.lists.map(function(item){return item.id}))+1;
                this.lists.push({
                    name:this.obj.name,
                    price:this.obj.price,
                    number:this.obj.number,
                    id:_id
                });
                this.obj={};//清空
            },
            del:function(index){

                location.href='stuff_delete.php?id='+this.lists[index].id;
            },
            edit:function(list){
               
                this.editObj={
                    name:list.name,
                    price:list.price,
                    number:list.number,
                    id:list.id,
                    mid:list.mid,
                    userid:list.userid
                } ;
                this.flag=true;//弹框显示
            },
            show:function(theid){
               
                this.editObj1={
                    aid:theid,
                   
                } ;
               this.fg=true;//弹框显示
           },
            update:function(){
                
                for(var i=0;i<this.lists.length;i++)
                {
                    if(this.lists[i].id==this.editObj.id){
                        this.lists[i]=this.editObj;
                        this.flag=false;//弹框消失
                   
                    }
                }
            }
        }
    })
}


//页面拖动特效
window.addEventListener("load", () => {	

const fillScreen = document.querySelector(".editblock");

	
const header = document.querySelector(".title");
	
const modelBox = document.querySelector(".contenti");

	
	header.addEventListener("mousedown", (event) => {

		const x = event.pageX - modelBox.offsetLeft;
		const y = event.pageY - modelBox.offsetTop;
		
        console.log(x, y);

		document.addEventListener("mousemove", move);
		
		function move(event) {
			
			modelBox.style.left = event.pageX - x + "px";
			modelBox.style.top = event.pageY - y + "px";
		}
		
		document.addEventListener("mouseup", () => {
			document.removeEventListener("mousemove", move);
		});
	});
});
//切换tab栏
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();//默认选项
</script>

</body>
</html>